<div class="pt-[88px]">
<div
    class="flex justify-between w-full shadow-md transition-all fixed duration-150 z-20 top-0 left-0 bg-zinc-900"
>
    <div class="container">
        <div class="flex justify-start h-[88px]">
            <div class="flex flex-col justify-center mx-2 hover:cursor-pointer">

            </div>

            <div class="flex flex-col justify-center ml-[20px] font-bold text-[20px]">
                <div

                    @class([
                        "relative pb-2 hover:border-b-4 border-white hover:cursor-pointer text-white"
                    ])
                >
                    <a href="/" wire:navigate>首页</a>
                    @if(request()->is('/'))
                        <span  class="absolute border-b-[7px] border-l-[10px] border-r-[10px] border-transparent border-solid border-b-white bottom-[-1px] left-[50%]"></span>
                    @endif
                </div>
            </div>
            @foreach($categories as $nav)
                <div wire:key="{{$nav['id']}}" class="group relative flex flex-col justify-center ml-[20px] font-bold text-[20px]">
                    <div class="relative pb-2 hover:border-b-4 border-white hover:cursor-pointer text-white">
                        <a  href="{{route('category.list',['category'=>$nav['id']])}}" wire:navigate>{{$nav['name']}}</a>
                        @if($nav['id'] == $category?->id || $nav['id'] ==$category?->parent_id)
                            <span class="absolute w-0 h-0 border-b-[5px] border-l-[5px] border-r-[5px] border-transparent border-solid border-b-white bottom-[-1px] left-[48%]"></span>
                        @endif

                    </div>
                    @if($nav['children'])
                        <div class="absolute flex transition ease-in-out duration-300 bg-zinc-700 inset-0 opacity-0 group-hover:opacity-100  py-2 px-3  flex-col min-w-[220px] z-10 top-full p-2 rounded h-fit">
                            @foreach($nav['children'] as $child)
                                <a href="{{route('category.list',['category'=>$child['id']])}}" wire:navigate class="text-base">
                                <div class="font-normal flex items-center gap-2 text-white hover:cursor-pointer hover:bg-zinc-800 hover:text-white rounded p-1 px-6">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-white">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" />
                                    </svg>

                                     {{$child['name']}}
                                </div>
                                </a>
                            @endforeach

                        </div>
                    @endif

                </div>
            @endforeach
        </div>
        <div class="flex sm:justify-center sm:items-center selection:text-white">
            @if (Route::has('login'))
                <div class="sm:fixed sm:top-0 sm:right-0 p-6 text-right z-10 cursor-pointer flex items-center gap-4">
                    @auth('frontend')
                        <div class="flex items-center gap-1 relative bg-gray-400 rounded-full p-2 hover:bg-black">
                            <a href="{{ route('borrow.list') }}" >
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
                                </svg>
                            </a>

                            <a class="absolute -right-4 -top-3 rounded-full bg-zinc-700 text-white text-sm w-5 h-5 text-center">{{$borrowCount}}</a>
                        </div>
                        <a href="{{ url('/dashboard') }}" class="font-semibold bg-gray-400 rounded-full p-2 hover:bg-black">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                            </svg>

                        </a>
                    @else
                        <a href="{{ route('login') }}" class="font-semibold text-white ">登录</a>

                        @if (Route::has('register'))
                            <a href="{{ route('register') }}" class="ml-4 bg-zinc-700 py-1 px-4 rounded text-white ">注册</a>
                        @endif
                    @endauth
                </div>
            @endif
        </div>
    </div>

</div>
</div>
